Responsive landing page layout
共有2 個のファイルを変更した、26 個の追加 と 4 個の削除を含む
+ 22
- 1
app/assets/stylesheets/start.css.less
@@ -212,4 +212,25 @@ p.footer {
|
||
| 212 | 212 |
p.footer a {
|
| 213 | 213 |
color: black; |
| 214 | 214 |
text-transform: underline; |
| 215 |
-} |
|
| 215 |
+} |
|
| 216 |
+ |
|
| 217 |
+@media (max-width: 979px) {
|
|
| 218 |
+ .navbar-fixed-top {
|
|
| 219 |
+ background-color: black; |
|
| 220 |
+ margin-bottom: 0px; |
|
| 221 |
+ } |
|
| 222 |
+ .navbar .btn-navbar {
|
|
| 223 |
+ float: right; |
|
| 224 |
+ padding: 7px 10px; |
|
| 225 |
+ margin-left: 5px; |
|
| 226 |
+ margin-right: 5px; |
|
| 227 |
+ color: #ffffff; |
|
| 228 |
+ background-color: rgba(0, 0, 0,0); |
|
| 229 |
+ transition: all 0.25s ease; |
|
| 230 |
+ } |
|
| 231 |
+ .navbar .btn-navbar:hover {
|
|
| 232 |
+ background-color: rgba(0, 0, 0,0); |
|
| 233 |
+ transition: all 0.25s ease; |
|
| 234 |
+ } |
|
| 235 |
+} |
|
| 236 |
+ |
+ 4
- 3
app/views/layouts/landing_page.erb
@@ -42,10 +42,10 @@ |
||
| 42 | 42 |
</head> |
| 43 | 43 |
<body> |
| 44 | 44 |
|
| 45 |
- <div class="navbar navbar-fixed-top"> |
|
| 45 |
+ <nav class="navbar navbar-fixed-top"> |
|
| 46 | 46 |
<div class="navbar-inner"> |
| 47 | 47 |
<div class="container"> |
| 48 |
- <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> |
|
| 48 |
+ <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" style="margin-top: 13px;"> |
|
| 49 | 49 |
<span class="icon-bar"></span> |
| 50 | 50 |
<span class="icon-bar"></span> |
| 51 | 51 |
<span class="icon-bar"></span> |
@@ -78,7 +78,7 @@ |
||
| 78 | 78 |
|
| 79 | 79 |
</div> |
| 80 | 80 |
</div> |
| 81 |
- </div> |
|
| 81 |
+ </nav> |
|
| 82 | 82 |
|
| 83 | 83 |
<div> |
| 84 | 84 |
|
@@ -89,3 +89,4 @@ |
||
| 89 | 89 |
|
| 90 | 90 |
</body> |
| 91 | 91 |
</html> |
| 92 |
+ |